﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  <title>乐优商城--商品搜索结果页</title>
  <link rel="icon" href="assets/img/favicon.ico">
  <link href='./css/material.css' rel="stylesheet">
  <link href="./css/vuetify.min.css" rel="stylesheet">
  <script src="./js/vue/vue.js"></script>
  <script src="./js/vue/vuetify.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/common.js"></script>
  <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
  <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
  <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
  <style type="text/css">
    * {
      box-sizing: unset;
    }

    .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
      width: 46px;
      height: 23px;
      border: 1px solid #DDD;
      background: #FFF;
      line-height: 23px;
      font-family: "\5b8b\4f53";
      text-align: center;
      font-size: 16px;
      color: #AAA;
      text-decoration: none;
      out-line: none
    }

    .btn-arrow:hover {
      background-color: #1299ec;
      color: whitesmoke;
    }

    .top-pagination {
      display: block;
      padding: 3px 15px;
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      color: #999;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
      text-transform: uppercase;
      float: right;
      margin-top: 6px
    }

    .top-pagination span {
      margin-right: 10px;
    }

    /*        .logo-list li{
                padding:8px;
            }
           .logo-list li:hover{
                background-color: #f3f3f3;
            }*/
    .type-list a:hover {
      color: #1299ec;
    }

    .skus {
      list-style: none;
    }

    .skus li {
      list-style: none;
      display: inline-block;
      float: left;
      margin-left: 2px;
      border: 2px solid #f3f3f3;
    }

    .skus li.selected {
      border: 2px solid #dd1144;
    }

    .skus img {
      width: 25px;
      height: 25px;
    }

    .skuTitle {
      overflow: hidden
    }

    .skuTitle:hover {
      overflow: inherit;
    }
  </style>
  <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
  <!--顶部导航-->
  <div id="nav-bottom">
    <ly-top/>
  </div>


  <!--list-content-->
  <div class="main">
    <div class="py-container">

      <div class="bread">
        <!--面包屑-->
        <ul class="fl sui-breadcrumb">
          <li><span>全部结果:</span></li>
          <li><a href="#">手机</a></li>
          <li><span>手机通讯</span></li>
        </ul>
        <!--已选择过滤项-->
        <ul class="tags-choose">
          <li class="tag">
            品牌:<span style="color: red">apple</span>
            <i class="sui-icon icon-tb-close"></i>
          </li>
          <li class="tag">
            内存:<span style="color: red">4G</span>
            <i class="sui-icon icon-tb-close"></i>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>

      <!--过滤项-->
      <div class="clearfix selector">
        <div class="type-wrap">
          <div class="fl key">分类</div>
          <div class="fl value">
            <ul class="type-list">
              <li>
                <a>手机</a>
              </li>
              <li>
                <a>儿童手表</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>
        <div class="type-wrap logo">
          <div class="fl key brand">品牌</div>
          <div class="value logos">
            <ul class="logo-list">
              <li><img src="img/_/phone01.png"/></li>
              <li><img src="img/_/phone02.png"/></li>
              <li><img src="img/_/phone03.png"/></li>
              <li><img src="img/_/phone04.png"/></li>
              <li><img src="img/_/phone05.png"/></li>
              <li><img src="img/_/phone06.png"/></li>
              <li><img src="img/_/phone07.png"/></li>
              <li><img src="img/_/phone08.png"/></li>
              <li><img src="img/_/phone09.png"/></li>
              <li><img src="img/_/phone10.png"/></li>
              <li><img src="img/_/phone11.png"/></li>
              <li><img src="img/_/phone12.png"/></li>
              <li><img src="img/_/phone13.png"/></li>
              <li><img src="img/_/phone14.png"/></li>
              <li><img src="img/_/phone05.png"/></li>
              <li><img src="img/_/phone06.png"/></li>
              <li><img src="img/_/phone07.png"/></li>
              <li style="text-align: center"><a style="line-height: 30px; font-size: 12px" href="#">黑马</a></li>
            </ul>
          </div>
          <div class="fl ext">
            <a href="javascript:void(0);" class="sui-btn">多选</a>
          </div>
        </div>
        <div class="type-wrap">
          <div class="fl key">网络制式</div>
          <div class="fl value">
            <ul class="type-list">
              <li>
                <a>GSM（移动/联通2G）</a>
              </li>
              <li>
                <a>电信2G</a>
              </li>
              <li>
                <a>电信3G</a>
              </li>
              <li>
                <a>移动3G</a>
              </li>
              <li>
                <a>联通3G</a>
              </li>
              <li>
                <a>联通4G</a>
              </li>
              <li>
                <a>电信3G</a>
              </li>
              <li>
                <a>移动3G</a>
              </li>
              <li>
                <a>联通3G</a>
              </li>
              <li>
                <a>联通4G</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>
        <div class="type-wrap">
          <div class="fl key">显示屏尺寸</div>
          <div class="fl value">
            <ul class="type-list">
              <li>
                <a>4.0-4.9英寸</a>
              </li>
              <li>
                <a>4.0-4.9英寸</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>
        <div class="type-wrap">
          <div class="fl key">摄像头像素</div>
          <div class="fl value">
            <ul class="type-list">
              <li>
                <a>1200万以上</a>
              </li>
              <li>
                <a>800-1199万</a>
              </li>
              <li>
                <a>1200-1599万</a>
              </li>
              <li>
                <a>1600万以上</a>
              </li>
              <li>
                <a>无摄像头</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>
        <div class="type-wrap">
          <div class="fl key">价格</div>
          <div class="fl value">
            <ul class="type-list">
              <li>
                <a>0-500元</a>
              </li>
              <li>
                <a>500-1000元</a>
              </li>
              <li>
                <a>1000-1500元</a>
              </li>
              <li>
                <a>1500-2000元</a>
              </li>
              <li>
                <a>2000-3000元 </a>
              </li>
              <li>
                <a>3000元以上</a>
              </li>
            </ul>
          </div>
          <div class="fl ext">
          </div>
        </div>
        <div class="type-wrap" style="text-align: center">
          <v-btn small flat>
            更多
            <v-icon>arrow_drop_down</v-icon>
          </v-btn>
          <v-btn small="" flat>
            收起
            <v-icon>arrow_drop_up</v-icon>
          </v-btn>
        </div>
      </div>

      <!--details-->
      <div class="details">
        <!--商品列表的导航-->
        <div class="sui-navbar">
          <div class="navbar-inner filter">
            <ul class="sui-nav">
              <li class="active">
                <a href="#">综合</a>
              </li>
              <li>
                <a href="#">销量</a>
              </li>
              <li>
                <a href="#">新品</a>
              </li>
              <li>
                <a href="#">评价</a>
              </li>
              <li>
                <a href="#">价格</a>
              </li>
            </ul>
            <!--顶部分页-->
            <div class="top-pagination">
              <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
              <span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
              <a class="btn-arrow" href="#" @click.prevent="prePage" style="display: inline-block">&lt;</a>
              <a class="btn-arrow" href="#" @click.prevent="nextPage" style="display: inline-block">&gt;</a>
            </div>
          </div>
        </div>
        <!--商品的列表-->
        <div class="goods-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
              <div class="list-wrap">
                <div class="p-img">
                  <a :href="'item.html?id='+goods.id" target="_blank"><img :src="goods.selectedSku.image" height="200"/></a>
                  <ul class="skus">
                    <li :class="{selected: sku.id===goods.selectedSku.id}" @mouseenter="goods.selectedSku=sku"
                        v-for="sku in goods.skus" :key="sku.id">
                      <img :src="sku.image">
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>{{ly.formatPrice(goods.selectedSku.price)}}</i>
                  </strong>
                </div>
                <div class="attr skuTitle">
                  <em>{{goods.selectedSku.title}}</em>
                </div>
                <div class="cu" style="overflow: hidden">
                  <em><span>促</span></em><em v-html="goods.subTitle"></em>
                </div>
                <div class="commit">
                  <i class="command">已有2000人评价</i>
                </div>
                <div class="operate">
                  <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                  <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                  <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--底部分页-->
        <div class="fr">
          <div class="sui-pagination pagination-large">
            <ul>
              <li class="prev disabled">
                <a href="#">«上一页</a>
              </li>
              <li class="active">
                <a href="#">1</a>
              </li>
              <li>
                <a href="#">2</a>
              </li>
              <li>
                <a href="#">3</a>
              </li>
              <li>
                <a href="#">4</a>
              </li>
              <li>
                <a href="#">5</a>
              </li>
              <li class="dotted"><span>...</span></li>
              <li class="next">
                <a href="#">下一页»</a>
              </li>
            </ul>
            <div><span>共10页&nbsp;</span><span>
      到第
      <input type="text" class="page-num">
      页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
          </div>
        </div>
      </div>
      <!--热卖商品-->
      <div class="clearfix hot-sale">
        <h4 class="title">热卖商品</h4>
        <div class="hot-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_01.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s (A1699)</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_03.png"/>
                </div>
                <div class="attr">
                  <em>金属A面，360°翻转，APP下单省300！</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_04.png"/>
                </div>
                <div class="attr">
                  <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4068.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有20人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_02.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s (A1699)</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<script type="text/javascript">
  var vm = new Vue({
    el: "#searchApp",
    data: {
      ly,
      params: {
        key: "",
        page: 1
      },
      total: 0, // 总条数
      totalPage: 0, // 总页数
      goodsList: [], // 当前页商品
    },
    created() {
      let key = ly.getUrlParam("key");
      if (!key) {
        // 搜索关键字为空，返回
        alert("没有搜索到任何数据关于''!");
      }
      this.params.key = key;

      let page = ly.getUrlParam("page");
      this.params.page = page ? parseInt(page) : 1;
      // 搜索数据
      this.searchData();
      // 查询过滤条件
      this.getSearchFilters();
    },
    watch: {
      "params.page"() {
        // 重新搜索数据
        this.searchData();
      }
    },
    methods: {
      getSearchFilters() {
        // 过滤条件查询
        axios.get("/search/goods/filters", {
            params: this.params
          })
          .then(resp => {

          })
          .catch(error => console.log(error))
      },
      searchData() {
        // 查询商品数据
        axios.get("/search/goods/page", {
            params: this.params
          })
          .then(resp => {
            this.total = resp.data.total;
            this.totalPage = resp.data.totalPage;

            resp.data.items.forEach(goods => {
              // 处理goodsList中的skus
              goods.skus = JSON.parse(goods.skus);
              // 在当前Goods中，记录被选中的sku，默认是第一个
              goods.selectedSku = goods.skus[0];
            });
            this.goodsList = resp.data.items;
          })
          .catch(error => console.log(error))
      },
      prePage() {
        if (this.params.page > 1) this.params.page--;
      },
      nextPage() {
        if (this.params.page < this.totalPage) this.params.page++;
      }
    },
    components: {
      lyTop: () => import("./js/pages/top.js")
    }
  });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
  <div class="tbar-cart-item">
    <div class="jtc-item-promo">
      <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
      <div class="promo-text">已购满600元，您可领赠品</div>
    </div>
    <div class="jtc-item-goods">
      <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
      <div class="p-name">
        <a href="#">{1}</a>
      </div>
      <div class="p-price"><strong>¥{3}</strong>×{4}</div>
      <a href="#none" class="p-del J-del">删除</a>
    </div>
  </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    $("#service").hover(function () {
      $(".service").show();
    }, function () {
      $(".service").hide();
    });
    $("#shopcar").hover(function () {
      $("#shopcarlist").show();
    }, function () {
      $("#shopcarlist").hide();
    });

  })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>